<template>

  <el-row style="width: 100%;height: 100%;">

    <el-tooltip content="折叠/展开编辑框" placement="bottom" v-if="isEdit">
      <el-button type="warning" :icon="drawer?'el-icon-d-arrow-left':'el-icon-d-arrow-right'"
                 :style="{left: drawer?'265px':'10px'}"
                 style="position: absolute;top: 4px;z-index: 666" @click="drawer=!drawer"></el-button>
    </el-tooltip>

    <transition name="el-zoom-in-center" v-if="isEdit">
      <el-col :span="drawer?4:0" style="height: 100%;padding: 0px 0px 0px 0" v-show="drawer">
        <div class="panel panel-default panel_chart chart-model" style="height: 100%;width: 100%">
          <div class="panel-heading">
            <i class="fa fa-sync fa-spin"></i>分析配置
          </div>
          <div class="panel-body">
            <el-form v-model="dashboard" label-position="right" label-suffix=":">
              <el-form-item label="名称">
                <el-input v-model="dashboard.name"></el-input>
              </el-form-item>
              <label>样式</label>
              <div style="padding-left: 5px">
                <el-form-item label="背景颜色">
                  <el-color-picker v-model="dashboard.style.backgroundColor"></el-color-picker>
                </el-form-item>
                <el-form-item label="背景图片">
                  <el-select v-model="dashboard.style.backgroundImage">
                    <el-option label="无" value="none"></el-option>
                    <el-option label="图片一"
                               :value="'url(' + require('@/assets/images/background/background-1.jpg') + ')'"></el-option>
                    <el-option label="图片二"
                               :value="'url(' + require('@/assets/images/background/background-2.png') + ')'"></el-option>
                    <el-option label="图片三"
                               :value="'url(' + require('@/assets/images/background/background-3.jpg') + ')'"></el-option>
                    <el-option label="图片四"
                               :value="'url(' + require('@/assets/images/background/background-4.jpg') + ')'"></el-option>
                    <el-option label="图片五"
                               :value="'url(' + require('@/assets/images/background/background-6.jpg') + ')'"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="边框风格">
                  <el-select v-model="dashboard.style.borderClass">
                    <el-option label="无" :value="0"></el-option>
                    <el-option v-for="index of 13" :label="'风格' + index"
                               :key="index"
                               :value="index"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="dashboard.style.borderClass&&dashboard.style.borderClass > 0" label="边框颜色">
                  主
                  <el-color-picker v-model="dashboard.style.borderColor[0]"></el-color-picker>
                  副
                  <el-color-picker v-model="dashboard.style.borderColor[1]"></el-color-picker>
                </el-form-item>
                <el-form-item v-if="dashboard.style.borderClass&&dashboard.style.borderClass >0" label="边框背景色">
                  <el-color-picker v-model="dashboard.style.borderBackgroundColor"></el-color-picker>
                </el-form-item>
                <el-form-item v-if="[4,5,8].indexOf(dashboard.style.borderClass)>-1" label="反转">
                  <el-switch v-model="dashboard.style.borderReverse"></el-switch>
                </el-form-item>
                <el-form-item v-if="dashboard.style.borderClass == 11" label="边框标题">
                  <el-input v-model="dashboard.style.borderTitle"></el-input>
                </el-form-item>
                <el-form-item label="面板间距(上下)">
                  <el-input-number v-model="dashboard.style.config.margin[1]"></el-input-number>
                </el-form-item>
                <el-form-item label="面板间距(左右)">
                  <el-input-number v-model="dashboard.style.config.margin[0]"></el-input-number>
                </el-form-item>
              </div>

              <label>筛选配置</label>
              <div style="padding-left: 5px">
                <el-form-item label="显示">
                  <el-switch v-model="dashboard.globalFilter.show"></el-switch>
                </el-form-item>
                <el-form-item label="日期启用" v-show="dashboard.globalFilter.show">
                  <el-switch v-model="dashboard.globalFilter.date.enable"></el-switch>
                </el-form-item>
              </div>
              <label>数据加载</label>
              <div style="padding-left: 5px">
                <el-form-item label="模式">
                  <el-radio-group v-model="dashboard.isQueue">
                    <el-radio :label="0">并发</el-radio>
                    <el-radio :label="1">队列</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div style="text-align: center">
                <el-form-item>
                  <el-button type="primary" @click="handlePreviewDashboard">预览</el-button>
                  <el-button type="success" @click="handleSaveDashboard">保存</el-button>
                </el-form-item>
              </div>

            </el-form>
          </div>
        </div>
      </el-col>
    </transition>

    <el-col style="height: 100%;padding-top: 5px;width: 100%" :span="isEdit&&drawer?20:24"
            :style="dashboard.style"
            class="main">
      <dv-loading v-show="loading">Loading...</dv-loading>
      <el-container v-show="!loading" style="height: 100%">
        <el-header height="30px" v-show="dashboard.globalFilter.show">
          <!--全局过滤器-->
          <filter-view :dashboard="dashboard"></filter-view>
        </el-header>
        <dv-decoration-2 style="width:100%px;height:5px;" />
        <el-main>

            <!--主面板-->

            <div class="panelDashBoard gridster grid-stack">
              <el-scrollbar>
                <div class="containerCenter">
                  <div v-if="!dashboard.gridItems||dashboard.gridItems.length===0">
                    <h3 style="text-align: center">请在此处放置图表，“编辑-->添加内容”。</h3>
                  </div>
                  <grid-layout
                    v-if="dashboard.gridItems&&dashboard.gridItems.length>0"
                    :responsive="!isEdit"
                    :layout.sync="dashboard.gridItems"
                    :responsive-layouts="{
                      'xs': xsGridItems,
                      'xxs': xsGridItems
                    }"
                    :row-height="30"
                    :is-draggable="isEdit"
                    :is-resizable="isEdit"
                    :margin="dashboard.style.config.margin"
                    @breakpoint-changed="breakpointChangedEvent"
                  >
                    <my-border :level="dashboard.style.borderClass"
                               :color="dashboard.style.borderColor"
                               :background-color="dashboard.style.borderBackgroundColor"
                               :reverse="dashboard.style.borderReverse"
                               :title="dashboard.style.borderTitle"
                    >
                      <grid-item v-for="item in dashboard.gridItems"
                                 :x="item.x"
                                 :y="item.y"
                                 :w="item.w"
                                 :h="item.h"
                                 :i="item.i"
                                 :key="item.i"
                                 @resized="doResize"
                      >
                        <div :style="item.style" class="canvas-item">
                          <my-border style="height: 100%;width: 100%" :level="item.style.borderStyle.borderClass"
                                     :color="item.style.borderStyle.borderColor"
                                     :background-color="item.style.borderStyle.borderBackgroundColor"
                                     :reverse="item.style.borderStyle.borderReverse"
                                     :title="item.style.borderStyle.borderTitle">
                            <div v-if="item.type ==='workbook'" style="height: 100%;width: 100%">
                              <el-header :style="item.style.title" v-show="item.style.title.show">
                                {{ item.style.title.content }}
                              </el-header>
                              <el-main
                                :style="{height: 'calc(100% - ' + (item.style.title.show?item.style.title.height:'0px') + ')'}">
                                <work-book-view :work-book-id="item.workbookid" :ref="item.i"
                                                @initFinished="initDrillDown"
                                                :dashboard-item="item"
                                                :dashboard="dashboard"
                                >
                                </work-book-view>
                              </el-main>
                            </div>
                            <vtext v-if="item.type ==='vtext'" :element="item" :edit-mode="isEdit"></vtext>
                            <timer v-if="item.type ==='timer'"></timer>
                            <el-tabs v-if="item.type ==='tabs'" type="border-card">
                              <el-tab-pane v-for="(tab,index) in item.config.tabs" key="index" :label="tab.name"
                                           style="height: 100%">
                                <work-book-view :work-book-id="tab.id">
                                </work-book-view>
                              </el-tab-pane>
                            </el-tabs>
                            <el-carousel v-if="item.type ==='carousel'" style="height: 100%"
                                         :direction="item.config.direction"
                                         :interval="item.config.interval*1000" :type="item.config.type">
                              <el-carousel-item v-for="(tab,index) in item.config.tabs" key="index">
                                <work-book-view :work-book-id="tab.id">
                                </work-book-view>
                              </el-carousel-item>
                            </el-carousel>
                            <el-dropdown class="menuop" trigger="click" size="medium">
                              <i class="el-icon-menu" style="size:20px;color: rgb(24, 144, 255);"></i>
                              <template #dropdown>
                                <el-dropdown-menu>
                                  <el-dropdown-item v-show="isEdit" @click="removeItem(item)">删除</el-dropdown-item>
                                  <el-dropdown-item v-show="isEdit&&item.config" @click="editConfigOptions(item)">配置选项
                                  </el-dropdown-item>
                                  <el-dropdown-item v-show="isEdit&&item.type=='workbook'" @click="editItem(item)">编辑图表
                                  </el-dropdown-item>
                                  <el-dropdown-item v-show="isEdit&&item.type=='workbook'" @click="editDrillDown(item)">
                                    设置下钻
                                  </el-dropdown-item>
                                  <el-dropdown-item v-show="item.type=='workbook'" @click="showDetail(item)">数据详情
                                  </el-dropdown-item>
                                  <el-dropdown-item v-show="isEdit" @click="editItemStyle(item)">修改样式</el-dropdown-item>
                                </el-dropdown-menu>
                              </template>
                            </el-dropdown>
                          </my-border>
                        </div>
                      </grid-item>
                    </my-border>

                  </grid-layout>
                </div>
              </el-scrollbar>
            </div>


            <drill-down-view v-if="currentDrillItem.drillDownList && currentDrillItem.drillDownList.length>0"
                             @editDrillDown="editDrillDown" ref='drillViewDiag'
                             :current-item="currentDrillItem"></drill-down-view>


        </el-main>
      </el-container>
    </el-col>
    <!--  小面板样式编辑  -->
    <form-dialog ref="itemStyleDiag" title="编辑样式" v-slot:default="slotProps">
      <el-form v-model="slotProps.data" label-width="80">
        <el-form-item label="显示标题:" v-if="slotProps.data.title">
          <el-switch v-model="slotProps.data.title.show"></el-switch>
        </el-form-item>
        <el-form-item label="显示内容:" v-if="slotProps.data.title">
          <el-input v-model="slotProps.data.title.content"></el-input>
        </el-form-item>
        <el-form-item label="标题高度:" v-if="slotProps.data.title">
          <el-input v-model="slotProps.data.title.height" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="标题颜色:" v-if="slotProps.data.title">
          <el-color-picker v-model="slotProps.data.title.color"></el-color-picker>
        </el-form-item>
        <el-form-item label="面板背景颜色:">
          <el-color-picker v-model="slotProps.data.backgroundColor" show-alpha></el-color-picker>
        </el-form-item>
        <el-form-item label="边框风格">
          <el-select v-model="slotProps.data.borderStyle.borderClass">
            <el-option label="无" :value="0"></el-option>
            <el-option v-for="index of 13" :label="'风格' + index"
                       :key="index"
                       :value="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="slotProps.data.borderStyle.borderClass&&slotProps.data.borderStyle.borderClass > 0"
                      label="边框颜色">
          主
          <el-color-picker v-model="slotProps.data.borderStyle.borderColor[0]" show-alpha></el-color-picker>
          副
          <el-color-picker v-model="slotProps.data.borderStyle.borderColor[1]" show-alpha></el-color-picker>
        </el-form-item>
        <el-form-item v-if="slotProps.data.borderStyle.borderClass&&slotProps.data.borderStyle.borderClass > 0"
                      label="边框背景色">
          <el-color-picker v-model="slotProps.data.borderStyle.borderBackgroundColor" show-alpha></el-color-picker>
        </el-form-item>
        <el-form-item v-if="[4,5,8].indexOf(slotProps.data.borderStyle.borderClass)>-1" label="反转">
          <el-switch v-model="slotProps.data.borderStyle.borderReverse"></el-switch>
        </el-form-item>
        <el-form-item v-if="slotProps.data.borderStyle.borderClass == 11" label="边框标题">
          <el-input v-model="slotProps.data.borderStyle.borderTitle"></el-input>
        </el-form-item>
        <el-form-item label="字体:">
          <el-input v-model="slotProps.data['font-family']"></el-input>
        </el-form-item>
        <el-form-item label="字体大小:">
          <el-input v-model="slotProps.data['font-size']"></el-input>
        </el-form-item>
        <el-form-item label="字体颜色:">
          <el-color-picker v-model="slotProps.data['color']"></el-color-picker>
        </el-form-item>
        <el-form-item label="字体粗细:">
          <el-radio v-model="slotProps.data['font-weight']" label="normal">正常</el-radio>
          <el-radio v-model="slotProps.data['font-weight']" label="bold">加粗</el-radio>
        </el-form-item>
      </el-form>
    </form-dialog>
    <!-- 配置选项  -->
    <form-dialog ref="configDiag" title="配置选项" v-slot:default="slotProps">
      <el-form v-model="slotProps.data">
        <el-form-item v-if="slotProps.data.type==='tabs'||slotProps.data.type==='carousel'" label="列表内容:">
          <el-button @click="beforeChooseWorkBook(slotProps.data.config.tabs)" icon="el-icon-plus"
                     type="success"></el-button>
          <el-tag v-for="(item,index) in slotProps.data.config.tabs" :key="index" closable
                  @close="slotProps.data.config.tabs.splice(slotProps.data.config.tabs.indexOf(item),1)"
                  effect="dark"
                  size="medium">
            {{ item.name }}
          </el-tag>
        </el-form-item>
        <el-form-item v-if="slotProps.data.type==='carousel'" label="轮播方向:">
          <el-radio-group v-model="slotProps.data.config.direction">
            <el-radio label="horizontal">横向</el-radio>
            <el-radio label="vertical">纵向</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="slotProps.data.type==='carousel'" label="轮播速度(秒):">
          <el-input-number v-model="slotProps.data.config.interval"></el-input-number>
        </el-form-item>
        <el-form-item v-if="slotProps.data.type==='carousel'" label="轮播风格:">
          <el-radio-group v-model="slotProps.data.config.type">
            <el-radio label="">默认</el-radio>
            <el-radio label="card">卡片</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </form-dialog>

    <!-- 选择需要添加的图表 -->
    <form-dialog ref="chooseWorkBookDiag" title="图表选择" width="50%">
      <template v-slot:default="slotProps">
        <manage>
          <template v-slot:operation="scope">
            <el-button size="mini" type="success" @click="chooseWorkBook(scope.data)">选择</el-button>
          </template>
        </manage>
      </template>
      <template v-slot:foot>
        <div></div>
      </template>
    </form-dialog>

    <!-- 查看图表数据  -->
    <form-dialog ref="showDataDetailDiag" title="数据详情" v-slot:default="slotProps" :width="width < 500?'90%':'60%'">
      <ex-slot :row-header="slotProps.data.tableHeader" :data="slotProps.data.tableList"></ex-slot>
    </form-dialog>

    <!-- 设置图表下钻  -->
    <form-dialog ref="drillDownDiag" title="设置图表下钻" width="50%">
      <template v-slot:default="slotProps">
        <el-button type="success" @click="beforeChooseWorkBook(slotProps.data.drillDownList)">添加</el-button>
        <el-table :data="slotProps.data.drillDownList">
          <el-table-column label="编号" type="index"></el-table-column>
          <el-table-column label="标题" prop="title"></el-table-column>
          <el-table-column label="图表" prop="name"></el-table-column>
          <el-table-column label="参数" prop="param"></el-table-column>
          <el-table-column label="操作">
            <template v-slot:default="scope">
              <el-button type="primary">编辑</el-button>
              <el-button type="danger"
                         @click="slotProps.data.drillDownList.splice(slotProps.data.drillDownList.indexOf(scope.row),1)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </form-dialog>

  </el-row>
</template>

<script>
import {onBeforeRouteUpdate, useRoute} from "vue-router";
import {computed, nextTick, onMounted, reactive, ref, toRefs, watch} from 'vue';
import WorkBookView from "@/views/WorkBook/view";
import {store} from "@/components/chart/common/store";
import {saveDashboard, getDashboard, parsToObj, parsToString} from "@/api/dashboard";
import PubSub from "pubsub-js";
import {dateFormat} from "@/filter";
import {updateTask} from "@/utils/tasknotify";
import {Guid} from "@/utils/guid";
import FilterView from "@/views/dashboard/filter";
import Timer from "@/components/dashboard/timer";
import FormDialog from "@/components/formDialog";
import manage from "@/views/WorkBook/manage";
import router from "@/router";
import {ElMessage, ElMessageBox} from "element-plus";
import Vtext from "@/components/dashboard/vtext";
import exSlot from "@/components/tableview/simple";
import GlobalFilter from "@/views/dashboard/filter";
import {component} from 'vue-fullscreen'
import DrillDownView from "@/components/dashboard/DrillDownView";
import {doResize} from "@/utils/utils";
import myBorder from '@/components/dashboard/my-border'


export default {
  name: "edit",
  components: {
    DrillDownView,
    GlobalFilter,
    FormDialog,
    Timer,
    WorkBookView, FilterView, manage, Vtext, exSlot,
    fullscreen: component,
    myBorder
  },
  setup(props) {

    const route = useRoute();

    const defaultDashboard = {
      name: `新建分析${dateFormat(new Date(), "yyyyMMDDhhmmss")}`,
      gridItems: [],
      style: {
        config: {
          margin: [10, 10]
        },
        borderClass: 0,
        borderColor: []
      },
      globalFilter: {
        show: false,
        date: {
          date_range: [new Date(), new Date()],
          enable: true
        }
      },
      isQueue: 0
    }

    const dashboard = ref(defaultDashboard)
    const xsGridItems = ref({})
    const state = reactive({
      fullscreen: false,
      drawer: true,
      loading: false
    })

    const currentDrillItem = ref({})

    //加载分析对象
    const loadDashboard = (id) => {
      state.loading = true
      getDashboard(id).then(resp => {
        dashboard.value = parsToObj(resp.data)
        xsGridItems.value = getXsGridItems()
      }).finally(() => {
        state.loading = false
      })
    }

    //保存分析
    const handleSaveDashboard = () => {
      if (dashboard.value.gridItems && dashboard.value.gridItems.length) {
        let task;
        let model = parsToString(dashboard.value);
        task = updateTask({
          msg: "保存图表[" + model.name + "]"
        });
        return saveDashboard(model).then(resp => {
          task.status = "success";
          task.msg = "【完成】" + task.msg;
          updateTask(task)
          dashboard.value.name = resp.data.name
          dashboard.value.id = resp.data.id
          return ElMessageBox.confirm('保存成功，是否进入展示页查看？', '提示', {
              type: 'success',
              showCancelButton: true,
              confirmButtonText: '立即预览',
              cancelButtonText: '不用了谢谢'
            }
          ).then(handlePreviewDashboard);
        }).catch(error => {
          task.status = "error";
          task.msg = "【出错】" + task.msg + ":" + error;
          updateTask(task)
        })
      } else {
        ElMessage.warning("请先添加内容后再保存！")
        return false;
      }
    }

    const handlePreviewDashboard = () => {
      const path = router.resolve({name: 'dashboardView', query: {id: dashboard.value.id}})
      window.open(path.href, '_blank')
    }

    onBeforeRouteUpdate(newVal => {
      if (newVal.query.id) {
        loadDashboard(newVal.query.id)
      } else {
        dashboard.value = defaultDashboard
      }
    });

    onMounted(() => {
      if (route.query.id) {
        loadDashboard(route.query.id)
      }
    })

    const isEdit = computed(() =>
      route.name === 'dashboardEdit'
    )

    watch(() => [dashboard.value.gridItems.length, ...dashboard.value.style.config.margin], doResize, {immediate: false})

    const getXsGridItems = () => {
      const xsGridItems = _.cloneDeep(dashboard.value.gridItems)
      let currY = 0
      xsGridItems.forEach(item => {
        item.x = 0
        item.w = 4
        item.y = currY
        currY += item.h
      })
      return xsGridItems
    }

    const breakpointChangedEvent = (newBreakpoint, newLayout) => {
      console.log("BREAKPOINT CHANGED breakpoint=", newBreakpoint, ", layout: ", newLayout);
      dashboard.value.gridItems = newLayout
    }

    return {
      ...toRefs(state),
      doResize,
      xsGridItems,
      breakpointChangedEvent,
      dashboard, handleSaveDashboard, isEdit, handlePreviewDashboard, currentDrillItem
    }
  },
  data() {
    return {
      shared: store,
      width: document.body.clientWidth,
    }
  },
  methods: {
    //添加内容到分析页中
    addItem(option) {
      const gridItems = this.dashboard.gridItems
      const obj = _.maxBy(gridItems, o => {
        return o.y + o.h
      });
      let style = {
        backgroundColor: 'transparent',
        height: '100%',
        borderStyle: {
          borderClass: 0,
          borderColor: []
        }
      }
      this.dashboard.gridItems.push({
        x: 0,
        y: obj ? obj.y + obj.h : 0,
        w: 4,
        h: 10,
        i: Guid.NewGuid().ToString("N"),
        style: style,
        ...option
      });

    },
    //添加图表
    addWorkbook(item) {
      const style = {
        backgroundColor: 'transparent',
        height: '100%',
        title: {
          show: true,
          content: item.name,
          backgroundColor: 'transparent',
          color: '#000000',
          height: '30px',
          "font-size": 12,
          "line-height": '30px'
        },
        content: {
          height: '100%',
        },
        borderStyle: {
          borderClass: 0,
          borderColor: []
        }
      };

      const option = {
        //样式
        style: style,
        //类型
        type: 'workbook',
        workbookid: item.id//图表ID
      }
      this.addItem(option)
    },
    //添加文本内容
    addText() {
      const option = {
        w: 2,
        h: 1,
        type: 'vtext',
        config: {
          content: '双击输入文字'
        }
      }
      this.addItem(option)
    },
    //添加计时器
    addTimer() {
      const option = {
        w: 2,
        h: 1,
        type: 'timer'
      }
      this.addItem(option)
    },
    //添加标签页
    addTabs() {
      const option = {
        //类型
        type: 'tabs',
        config: {
          tabs: []
        }
      };
      this.addItem(option)
    },
    //添加轮播页
    addCarousel() {
      const option = {
        //类型
        type: 'carousel',
        config: {
          tabs: [],
          type: '',
          interval: 3000,
          direction: 'horizontal'
        }
      };
      this.addItem(option)
    },
    //删除子项
    removeItem(val) {
      _.remove(this.dashboard.gridItems, d => d == val);
    },
    //编辑图表样式
    editItemStyle(item) {
      this.$refs.itemStyleDiag.open(item.style).then(data => {
        item.style = data
      })
    },
    //打开图表编辑界面
    editItem(item) {
      let path = this.$router.resolve({name: 'workBookEdit', query: {id: item.workbookid}})
      window.open(path.href, '_blank')
    },
    //设置图表下钻
    editDrillDown(item) {
      if (!item.drillDownList) {
        item.drillDownList = []
      }
      this.$refs.drillDownDiag.open(item).then(data => {
        item.drillDownList = data.drillDownList
        this.initDrillDown(item)
      })
    },
    initDrillDown(currentEditChart, item) {
      const _this = this
      if (item.drillDownList && item.drillDownList.length > 0) {
        currentEditChart.onselected = (data) => {
          item.param = data;
          _this.currentDrillItem = item
          _this.$nextTick(() => {
            _this.$refs['drillViewDiag'].isShow = true
          })
        }
      }
    },
    //编辑配置选项
    editConfigOptions(item) {
      this.$refs.configDiag.open(item).then(data => {
        item.config = data.config
      })
    },
    //添加图表到数组中
    beforeChooseWorkBook(tabs) {
      this.$refs.chooseWorkBookDiag.open().then(data => {
        const {id, name} = data
        if (tabs) {
          tabs.push({id: id, name: name})
        } else {
          this.addWorkbook({id: id, name: name})
        }
      })
    },
    //点击选择事件
    chooseWorkBook(item) {
      this.$refs.chooseWorkBookDiag.confirm(item)
    },
    //查看数据详情
    showDetail(item) {
      const data = this.$refs[item.i].data;
      if (data && data.length) {
        let tableHeader = Object.keys(data[0]).map(t => {
          return {name: t}
        });
        this.$refs.showDataDetailDiag.open({
          tableHeader: tableHeader,
          tableList: data
        })
      }
    }
  },
  created() {
    this.shared.isEdit = false
    const _this = this
    //添加组件
    PubSub.subscribe('addDashboardComponent', function (msg, data) {
      if (data === 'timer') {
        _this.addTimer()
      }
      if (data === 'tabs') {
        _this.addTabs()
      }
      if (data === 'carousel') {
        _this.addCarousel()
      }
      if (data === 'vtext') {
        _this.addText()
      }
      if (data === 'workbook') {
        _this.beforeChooseWorkBook()
      }
    })
  },
  beforeUnmount() {
    PubSub.unsubscribe("addDashboardComponent")
  }
}
</script>

<style scoped>
.panelDashBoard {
  width: 100%;
  height: 100%;
}

.vue-grid-layout {
  background-color: transparent;
}

.vue-grid-item.resizing {
  opacity: 0.9;
}

.vue-grid-item >>> .menuop {
  position: absolute;
  right: 10px;
  top: 6px;
  padding: 0;
  margin: 0;
}

.vue-grid-item .el-main {
  padding: 0 !important;
}

.vue-grid-item >>> .vue-resizable-handle, .vue-grid-item >>> .menuop {
  z-index: 9999;
}

.vue-grid-item >>> .vue-resizable-handle:hover {
  background: url("../../assets/images/缩放_zoom-internal.svg") no-repeat;
}

.el-tabs >>> .el-tabs__content {
  height: calc(100% - 30px);
  padding: 0px;
}

.vue-grid-item >>> .el-carousel__container {
  height: 95%;
}

.vue-grid-item:hover {
  outline: 1px dashed #70c0ff
}

.canvas-item > * {
  height: 100%;
  width: 100%;
}

.el-tag {
  margin-left: 10px;
}

.fullscreen-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
